<template>
  <div class="my-article-box flex-col-start">

    <div class="my-article-body">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="1">
          <ArticleInfoBox :collect-able="false" :like-able="false" :list="articleList"></ArticleInfoBox>
        </el-tab-pane>
        <el-tab-pane label="全部可见" name="2">

        </el-tab-pane>
        <el-tab-pane label="仅我可见" name="3">

        </el-tab-pane>
        <el-tab-pane label="审核" name="4">定时任务补偿</el-tab-pane>
        <el-tab-pane label="草稿箱" name="5">定时任务补偿</el-tab-pane>
        x`
        <el-tab-pane label="回收站" name="6">定时任务补偿</el-tab-pane>
      </el-tabs>
      <el-button class="insert-btn" icon="el-icon-plus" round type="danger">
        添加文章
      </el-button>
    </div>
  </div>
</template>

<script>
import ArticleInfoBox from "@/components/article/ArticleInfoBox.vue";
import MiEditor from "@/components/editor/MiEditor.vue";
import WEditor from "@/components/editor/WEditor.vue";
import MiChat from "@/components/jwchat/MiChat.vue";

export default {
  name: "MyArticle",
  components: {MiChat, WEditor, MiEditor, ArticleInfoBox},
  data() {
    return {
      activeTab: "1",
      articleList: [
        {
          title: "测试标题",
          content: "测试内容",
          typeList: [
            {
              name: "python"
            },
            {
              name: "java"
            }
          ],
          status: 1,
          visibility: 1,
          createTime: new Date(),
          collectNum: 1115,
          likeNum: 222222,
          collect: false,
          like: false,
          image: "https://img0.baidu.com/it/u=2303941803,4000559364&fm=253&fmt=auto&app=138&f=JPEG?w=572&h=358"
        }
      ]
    }
  },
  methods: {
    handleTabClick(tab) {
      console.log(tab)
    }
  }
}
</script>

<style lang="less" scoped>
.my-article-box {
  width: 100%;

  .my-article-body {
    width: 90%;

    .insert-btn {
      position: fixed;
      bottom: 20px;
      right: 10px;
      width: 130px;
      transition: all 0.5s;

      &:hover {
        width: 150px;
      }
    }
  }
}
</style>